<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>

    const app = Vue.createApp({
      template: `<div>{{name}}-{{age}}-{{height}}-{{copy.age}}</div>`,
      setup(props, context) {
        const { ref, reactive, readonly, toRefs } = Vue;
        //ref 'dell'变成proxy({value:'dell'}这样一个响应式引用
        //reactive '{age:18}'变成proxy({age:18})这样一个响应式引用
        let name = ref('dell')
        let ageObj = reactive({ age: 18, height: 180 })
        let copy = readonly(ageObj)
        setTimeout(() => {
          name.value = 'lee';
          ageObj.age = 20;
          copy.age = 30
        }, 2000)
        // toRefs proxy({ name: 'dell', age: 28}), { 
        //  name: proxy({ value: 'dell'}),
        //  age: proxy({value: 28})
        const { age, height } = toRefs(ageObj)
        return { name, age, copy, height }
      }
    });


    const vm = app.mount('#root');
  </script>
</body>

</html>